<template>
  <div class="background-gray" id="topic_detail">
    <magic-header titleName="话题详情"></magic-header>
    
    <ma-scroll :down="true" :getMore="getListSpace"  :showMsg="false" :init="init">
    <div class="scroll-box">
      <div class="topic">
        <mu-row gutter>
          <mu-col width="35" class="img">
            <img :src="topicDetail.image ? addPath(topicDetail.image) : defaultImg" width="100%" v-if="topicDetail">
          </mu-col>
          <mu-col width="65" class="detail">
            <div>
              <h4 class="topic-tetle">
                #{{ topicDetail.title }}#
              </h4>
            </div>
            <div>
              <p>{{ topicDetail.desp }}</p>
            </div>
            <dynamic-author :headHide="true" :followShow="true" :value="topicDetail.author"></dynamic-author>
          </mu-col>
        </mu-row>
      </div>
      <div class="divide"></div>
      <p class="introduction" v-if="topicDetail">
        导语：{{ topicDetail.content }}
      </p>
      <div class="divide"></div>
      <h4 class="discussion">热门讨论</h4>
      <div class="divide"></div>
      <div class="comment-list">
        <empty v-if="dynamicList.length === 0" message="暂时没有讨论详情"></empty>
        <!-- <loadmore>
          <div v-if="dynamicList.length !== 0" v-for="(item,index) in dynamicList" :key="index">
            <dynamic :itemData="item" @removeSuccess="deleteTocDyn(index)"></dynamic>
          </div>
        </loadmore> -->
        <dynamic-new :isTopic="true" v-for="(obj,index) in dynamicList"  @shield="shield" :index="index" :obj="obj" :key="obj"></dynamic-new>
        <!-- <full-button v-tap="{methods: discus}" name="参与讨论"></full-button> -->
      </div>
      
      
    </div>
      </ma-scroll>
      <footer v-if="!isSilent" class="topic-footer">
        <div class="comment" v-tap="{methods: discus}">讨论</div>
        <!-- <div class="like" @click="like">喜欢</div> -->
      </footer>
  </div>
</template>

<script>
import magicHeader from "components/magicHeader";
import dynamic from "components/dynamic/dynamic";
import loadmore from "components/loadmore";
import fullButton from "components/button/full_button";
import empty from "components/empty-page.vue";
import dynamicAuthor from "components/dynamic/dynamic_author"
//vfac image
import vfacDefault from "assets/default_user_icon.png";
//vfhz image
import imagesServices from "services/getImage/getImage";
// service
import QueryFleetTopicInfoService from "services/community/QueryFleetTopicInfo";
import QueryUserInfoService from "services/community/QueryUserInfo";
import ListSpaceByTopic from "services/community/ListSpaceByTopic";
import QueryTopic from "services/community/QueryTopic";
import QueryStore from "services/community/QueryStore";
import dynamicNew from "components/dynamic/dynamic_home";
	import CreatePostBlacklist from 'services/community/CreatePostBlacklist.js'

let pageable = {
  pageNumber: 2,
  pageSize: 10
};

let _tit;
let loading;

export default {
  name: "topic_detail",
  data() {
    return {
      defaultImg: "",
      nickName: "",
      topicDetail: {},
      dynamicList: [],
      allLoaded: true,
      conLength: "",
      topicId: null,
      init:false,
      isSilent:false,
      index:10,
      count:10
    };
  },
  // deactivated() {
  //   //不是你期望的数据 则销毁组件
  //   if (this.topicId !== this.$route.params.topicId) {
  //     this.$destroy();
  //   }
  // },
  methods: {
    getQueryTopic(){
      QueryTopic.bind(this)({
        topicId:this.topicId
      },res=>{
        this.topicDetail = res
        console.log(this.topicDetail)
      })
    },
    //屏蔽信息
    shield(params) {
      if(this.$.userId){
        	console.log(params)
          CreatePostBlacklist.bind(this)(
            {
              id: params.id
            },
            res => {
              this.dynamicList.splice(params.index, 1);
              this.$.toast("屏蔽信息成功");
            },
            err => {}
          );
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
    
    },
    discus() {
      if (this.$.userId) {
        this.$router.push({
          name: "pub_dynamic",
          query: {
            topicTitle: this.topicDetail.title,
            topicId: this.topicDetail.refId
          }
        });
      } else {
        this.$.goLogin({
          name: "login"
        });
      }
    },
     getListSpace(callback) {
      let vm = this;
         return new Promise(function(resolve, reject) {
        ListSpaceByTopic.bind(vm)(
          {
            opicId:vm.$route.query.topicId,
            index:vm.index + "",
            count:vm.count + ""
          },
          res => {
            vm.dynamicList.push(...resp)
            vm.index += vm.count;
            vm.init = true;
            resolve(callback);
          }
        );
      });
    },
  },
  created() {
    this.topicId = this.$route.query.topicId
    this.getQueryTopic()
    this.defaultImg = vfacDefault;
    QueryStore.bind(this)({

      },resp=>{
        console.log(resp.shop.communitySilent)
        this.isSilent = resp.shop.communitySilent === '1'? true : false
      })

    ListSpaceByTopic.bind(this)({
        topicId:this.$route.query.topicId,
        index:0,
        count:10
      },resp=>{
        this.dynamicList.push(...resp)
        this.init = true;
      })
  },
  components: {
    magicHeader,
    dynamic,
    empty,
    loadmore,
    fullButton,
    dynamicAuthor,
    dynamicNew
  }
};
</script>
<style lang="scss">
#topic_detail{
  .scroller{
    width: 100%;
    padding-top: 10px;
    .topic-tetle{
      margin-top: 20px;
      font-size: 18px;
      min-height: 40px;
      font-weight: normal;
      color: rgb(66, 66, 66);
    }
    .topic{
      padding-bottom: 5px;
        padding-left: 5px;
      #dynamic_author{
        .leftBox{
          .right >div{
            padding-top: 5px;
          }
        }
        // .follow{
        //   font-size: 14px;
        // }
      }
      .img{
        width: 135px;
        height: 135px;
        margin: 0 auto;
        overflow: hidden;
        line-height:135px;
        img{
          display: inline-block;
          vertical-align: middle;
        }
      }
      .detail{
        width: calc( 100% - 145px)
      }
    }
    .comment-list{
      padding-bottom: 45px;
    }
    .divide{
      border: none;
      width: 100%;
      height: 8px;
      background-color: rgb(235, 233, 233);
    }
    .introduction{
      min-height: 60px;
      font-size: 14px;
      line-height: 18px;
      padding: 1em 1.5em;
    }
    .discussion{
      line-height: 40px;
      font-size: 16px;
      padding-left: 1em;
    }
  }
  #wrapper{
    top: 50px;
    
  }
  #dynamic_author{
    margin-top: 10px;
    padding: 0;
    .title{
      font-size: 14px;
    }
  }
  .topic-footer{
    background-color: #f98700;
    position:fixed;
    bottom: 0;
    width: 100%;
    display:flex;
    height: 50px;
    // border-top: 1px solid #999;
    z-index: 2;
    >div{
      width: 100%;
      text-align: center;
      line-height: 50px;
      font-size: 14px;
      position: relative;
      color: #fff;
    }
  }
  .result_empty{
    padding: 0;
  }
}
</style>


